<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<title></title>
	<link rel="stylesheet" href="">
</head>
<body>
<script src="https://cdn.bootcss.com/vue/2.5.8/vue.js"></script>
<!-- <script src='https://cdn.jsdelivr.net/vue.router/0.7.10/vue-router.min.js'></script> -->
<div id="root">
	<p>Original message:"{{message}}"</p> 
 	<p>Computed reversed message:"{{reverseMessage()}}"</p> 
</div>
<script>
	//①模板内的表达式实际上只用于简单的运算，对于复杂逻辑，使用计算机属性。
	var vm = new Vue({
		el : '#root',
		data : {
			message : 'hello world',
		},
		computed : {
			reverseMessage : function(){
				return this.message.split('').reverse().join('')
			}
		}
	})
</script>	
</body>
</html>